<template>
  <div class="shopping-cart-warpper">
    <div class="shopping-cart">
      <el-badge :value="shoppingList.length">
        <i class="el-icon-shopping-bag-1"></i>
      </el-badge>
      <span class="price-wrapper"
        >￥<span class="price-text">{{ amount }}</span></span
      >
    </div>
    <el-button class="commit-btn" type="primary" round @click="commit"
      >提交</el-button
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    routerName: String,
  },
  computed: {
    ...mapState(["amount", "shoppingList"]),
  },
  methods: {
    commit() {
      this.$emit("commit");
    },
  },
};
</script>

<style scoped>
.shopping-cart-warpper {
  box-sizing: border-box;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  padding: 1em 0 1em 1.2em;
  height: 50px;
  line-height: 32px;
  background: #e0edfc;
  vertical-align: center;
}
.price-wrapper {
  vertical-align: -6px;
  color: #eb4d4d;
}
.price-text {
  font-weight: bold;
  font-size: 1.3em;
}
.commit-btn {
  height: 3em;
}
.el-icon-shopping-bag-1 {
  font-size: 3em;
  color: #61affd;
}
</style>
